<template>
	<div ref="charObj" class="chartbase">
	</div>
</template>
<style scoped>

</style>
<script>
	import echarts from 'echarts'
	import { initEchartsByObj } from './chartTool.js'
	export default {
		name: 'wioc-chart-base',
		data() {
			return {
				chartObj: null,
				timeOutObj:null
			}
		},
		props: {
			'options': {
				type: Object
			},
			'autoRefresh': {
				type: Boolean,
				default: false
			},
			'duration': {
				type: Number,
				default: 1000 * 60
			}
		},
		mounted() {
			this.initChart();
		},
		destroyed(){
			this.removeTimeout()
		},
		watch:{
			options(val){
				if(this.chartObj){
					this.chartObj = initEchartsByObj(this.$refs.charObj, val);
				}
				if(val){
					this.reFreshData(false)
				}
			}
		},
		methods: {
			removeTimeout(){
				if(this.timeOutObj){
					clearTimeout(this.timeOutObj)
				}
			},
			initChart() {
				if(this.options){
					this.chartObj = initEchartsByObj(this.$refs.charObj, this.options);
					this.chartObj.on('click', (params) => {
					    // 触发事件修改
					    this.$emit("change",params)
					});
					this.reFreshData(true)
				}
			},
			reFreshData(skip) {
				this.removeTimeout()
				if(this.chartObj && !skip){
					this.chartObj.clear();
					this.chartObj.setOption(this.options);
				}
				
				if (this.autoRefresh) {
					this.timeOutObj = setTimeout(this.reFreshData, this.duration);
				}
			}
		}
	}
</script>
